<template>
  <div>
    <van-nav-bar title="订单备注" fixed placeholder z-index="999" left-arrow @click-left="GOback" :border="false" />
    <!-- 快速备注 -->
    <section class="quick_remark">
      <header class="header_style">快速备注</header>
      <ul class="remark_arr_list_ul" v-if="$store.state.remarkData.remarks">
        <remarkList v-for="(item,index) in $store.state.remarkData.remarks" :key="index" :remark="item"></remarkList>
      </ul>
    </section>
    <!-- 其他备注 -->
    <section class=" quick_remark">
      <header class="header_style">其他备注</header>
      <textarea class="input_text" placeholder="请输入备注内容(可不填)" v-model="values"></textarea>
    </section>
    <div class="determine" @click="confirm($store.state.textAddData)">确定</div>
  </div>
</template>

<script>
import remarkList from '@/views/confirmOrder/remark/remark_arr_list_li.vue'
export default {
  components: {
    remarkList
  },
  data() {
    return {
      values: ''
    }
  },
  methods: {
    //返回
    GOback() {
      this.$router.go(-1)
    },
    //
    confirm(text) {
      const obj = text + ',' + this.values
      this.$store.commit('ReturnData', obj)
      this.GOback()
    }
  }
}
</script>

<style lang="less" scoped>
.quick_remark {
  background-color: #fff;
  margin-top: 0.4rem;
  padding: 0 0.6rem 1rem;
  .header_style {
    font-size: 0.65rem;
    color: #333;
    line-height: 2rem;
  }
  .remark_arr_list_ul {
    margin-top: 0.15rem;
    display: flex;
    flex-wrap: wrap;
  }
}
.input_text {
  width: 100%;
  background-color: #f9f9f9;
  border: 0.025rem solid #eee;
  resize: none;
  min-height: 4.5rem;
  border-radius: 0.2rem;
  font-size: 0.55rem;
  color: #666;
  padding: 0.5rem;
}
.choosed {
  color: #fff;
  background-color: #3190e8;
}
.remark_arr_list_li {
  margin-right: 0.6rem;
  margin-bottom: 0.9rem;
}
</style>